<%--
  Created by IntelliJ IDEA.
  User: axing
  Date: 2019/11/14
  Time: 下午1:28
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="JS/ShopCart.js"></script>

<html>
<head>
    <title>购物网站</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="bookmark"href="favicon.ico" />
    <style>
        .c_photo img {
            width: 200px;
            height: 200px;
        }

        .comm_box {
            width: 25%;
            float: left;
            position: unset;
        }
        .comcombox{
            position: relative;
        }
        .cart {
            width: 700px;
            padding: 0 10px 10px;
            border: 1px solid #D5E5F5;
            float: left;
            position: relative;
            margin-bottom: 20px;
            left: 100px;
            top: 350px;
        }

        .cart-title {
            margin-bottom: 10px;
            font-size: 14px;
            border-bottom: 1px solid #AED2FF;
            line-height: 30px;
            height: 30px;
            font-weight: 700;
            text-indent: 15px;
            color: #333;
            font-family: 'Microsoft YaHei';
        }

        .cart-table {
            width: 100%;
            margin: 0 auto;
            border-collapse: collapse;
            font-size: 12px;
            font-family: Verdana, "Microsoft YaHei";
            color: #333;
        }

        .cart-table th {
            border-bottom: 2px solid #B2D1FF;
            font-weight: normal;
            height: 35px;
            line-height: 23px;
        }

        .cart-item {
            background-color: #FAFCFF;
            border-bottom: 1px dotted #84B3FD;
        }

        .cart-item td {
            height: 55px;
            text-align: center;
        }

        .cart-item .cart-txt-left {
            text-align: left;
        }

        .cart-name {
            color: #3366D4;
            font-weight: bold;
        }

        .cart-subtotal {
            color: #FF3334;
            font-weight: bold;
        }

        .cart-reduce, .cart-add {
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            color: #FFF;
            background-color: #BDBDBD;
            border: 0;
            cursor: pointer;
            border-radius: 2px;
            font-family: 'Arial';
            font-size: 13.3333px;
        }

        .cart-reduce:hover, .cart-add:hover {
            background-color: #FF9900;
        }

        .cart-num {
            margin: 5px;
            width: 35px;
            text-align: center;
            height: 20px;
            line-height: 20px;
            padding: 0 3px;
            display: inline-block;
            background: #fff;
            border: 1px solid #bbb
        }

        .cart-del, .cart-all {
            color: #3366D4;
        }

        .cart-del:hover, .cart-all:hover {
            text-decoration: underline;
            cursor: pointer
        }

        .cart-bottom {
            height: 55px;
            text-align: right
        }

        .cart-bottom .cart-all {
            position: relative;
            top: 1px
        }

        .cart-total-price {
            color: #FF3334;
            font-weight: bold;
            font-size: 16px;
        }

        .cart-bottom-btn {
            color: #FFF;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin: 0 20px;
            background: #FE8502;
            border: 1px solid #FF6633;
            border-radius: 5px 5px 5px 5px;
            padding: 6px 12px;
        }

        .cart-bottom-btn:hover {
            background: #FF6600;
        }
        .shop_cart_img{
            width: 40px;
            height: 40px;
            position: absolute;
            top: 50%;
            right: 10px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="JS/underscore.js"></script>

</head>
<body>
<%@include file="/header.jsp" %>
欢迎进入购物平台！<br>
<div class="comcombox">
    <table>
        <c:forEach items="${sessionScope.commodities}" var="c">
            <div class="comm_box">
                <br>
                <div class="c_photo"><img src="${c.photo}">
                    <br>商品名称:${c.c_name}
<%--                    <br>商品剩余数量:${c.number}--%>
                    <br>商品价格:${c.price}
<%--                    <br>商品编号:${c.cid}--%>
                </div>
                <br><input type="button" value="加入购物车" onclick="cart.add(
                    {name: '${c.c_name}', price :${c.price}, num:1}
                    )">
            </div>
        </c:forEach>
    </table>
</div>
<div class="cart" id="cart_toggle">
    <div class="cart-title">我的购物车</div>
    <table class="cart-table">
        <form name=alipayment action="alipay.jsp" method="post" target="_blank">
        <tr>
            <th><span class="cart-all">全选</span></th>
            <th>商品</th>
        </tr>
        <tr class="cart-item">
            <td><input type="checkbox" class="cart-check" checked></td>
            <td><span class="cart-name">Loading...</span></td>
            <td><span class="cart-price">0</span></td>
            <td>
                <span class="cart-reduce">-</span>
                <span class="cart-num">0</span>
                <span class="cart-add">+</span>
            </td>
            <td><span class="cart-subtotal">0</span></td>
            <td><span class="cart-del">删除</span></td>
        </tr>
            <tr class="cart-bottom">
                <td colspan="6">
                    <span>已选择<span class="cart-total-num">0</span>件商品</span>
                    <span>总计:
                        <input class="cart-total-price" id="WIDtotal_amount" name="WIDtotal_amount" readonly/></span>
                    <input type="submit" value="提交订单" class="cart-bottom-btn">


                    <dt hidden>商户订单号 ：</dt>
                    <dd hidden>
                        <input id="WIDout_trade_no" name="WIDout_trade_no" readonly hidden/>
                    </dd>
                </td>
            </tr>
        </form>
    </table>
</div>
<div style="background: white;height: 30px;">

</div>
<span><a href="#cart_toggle"><img src="images/购物车.jpg" id="" class="shop_cart_img" ></a> </span>
<script>
    $("#btn").click(function () {
        $("#cart_toggle").toggle("clip");
    });
    function GetDateNow() {
        var vNow = new Date();
        var sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
        document.getElementById("WIDout_trade_no").value =  sNow;
    }
    GetDateNow();
</script>
</body>
</html>
